import ImagesModalTmplate from './imagesModal.html'
import {getHeight, getWidth} from "../../utils/dom";

class SwiperImages {
    constructor(options) {
        this.instance
        this._vue
        if (options) {
            this.images = options.images
            this.visiable = options.visiable || false
        }
        this.scaleDiff = 0
        this.translateXDiff = 0
        this.currentImage = 0
        this.init()
    }

    init() {
        /*存在不做修改*/
        if (this.instance) {
            this.instance = document.querySelector('#SwiperImages')
        } else {
            this.instance = document.createElement('div')
            this.instance.setAttribute('id', "SwiperImages")
            document.body.appendChild(this.instance);
        }
    }

    show() {
        var self = this
        this.instance.style.display = 'block'
        $(this.instance).html($.tmpl(ImagesModalTmplate, {"images": this.images}))
        this.event()
    }

    event() {
        var self = this
        this.$mark_dom = $(this.instance).find(".modal_mark")
        this.$modal_content = $(this.instance).find(".modal_body .modal_content")
        /*修复位置*/
        var top = (getHeight() - 205) / 2 + "px"
        var left = (getWidth() - self.$modal_content[0].offsetWidth) / 2 + "px"
        $(self.$modal_content).css({
            top,
            left
        })
        $(self.$modal_content).find('.images_wrapper').css({
            width: this.images.length * getWidth()
        })
        this.$modal_pagination = $(self.instance).find('.modal_body .modal_pagination')
        this.$modal_pagination.css({
            bottom: 20,
            left: (getWidth() - this.$modal_pagination.width()) / 2,
        })
        self.$modal_pagination.find(`.modal_pagination_item[data-index=${self.currentImage}]`)
            .css({background: '#fff'})

        this.$mark_dom.click(function () {
            self.close()
        })
        // 加入手势
        this.hammer = new window.Hammer(this.$modal_content[0])
        this.hammer.get('pinch').set({enable: true});
        this.hammer.get('swipe').set({
            enable: true,
            threshold: 1,
            velocity: 0.50
        });
        this.hammer.on('pinchend', function (ev) {
            var current_scale = ev.scale
            if (ev.scale <= 1) {
                var $image_dom = $(self.$modal_content).find(`.image_wrapper [data-index=${self.currentImage}]`)
                $image_dom.css({
                    transform: `scale(1)`
                })
            }
        })
        this.hammer.on("pinch", function (ev) {
            var current_scale = ev.scale
            var $image_dom = $(self.$modal_content).find(`.image_wrapper [data-index=${self.currentImage}]`)
            $image_dom.css({
                transform: `scale(${current_scale})`
            })
        });
        this.hammer.on("swipeleft", function (ev) {
            if (self.currentImage <= 0) {
                self.translateXDiff = 0
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(${0}px)`
                })
            } else {
                self.currentImage -= 1;
                self.translateXDiff = self.currentImage * getWidth()
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(-${   self.translateXDiff }px)`
                })
            }
            self.$modal_pagination.find('.modal_pagination_item').css({background: '#a5a5a5'})
            self.$modal_pagination.find(`.modal_pagination_item[data-index=${self.currentImage}]`)
                .css({background: '#fff'})
        });
        this.hammer.on("swiperight", function (ev) {
            if (self.currentImage >= self.images.length - 1) {
                self.translateXDiff = getWidth() * (self.images.length - 1)
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(-${   self.translateXDiff }px)`
                })
            } else {
                self.currentImage += 1;
                self.translateXDiff = self.currentImage * getWidth()
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(-${   self.translateXDiff }px)`
                })
            }
            self.$modal_pagination.find('.modal_pagination_item').css({background: '#a5a5a5'})
            self.$modal_pagination.find(`.modal_pagination_item[data-index=${self.currentImage}]`)
                .css({background: '#fff'})
        });
        /*swiper move*/
        this.hammer.on("panmove", function (ev) {
            if (ev.direction == 2) {
                /*x+*/
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(-${  self.translateXDiff - ev.distance}px)`
                })
            }
            /*x -*/
            if (ev.direction == 4) {
                $(self.instance).find('.images_wrapper').css({
                    transform: `translateX(-${     self.translateXDiff + ev.distance}px)`
                })
            }
        })
        this.hammer.on("panend", function (ev) {
            $(self.instance).find('.images_wrapper').css({
                transition: 'all .3s ease',
                transform: `translateX(-${   self.translateXDiff }px)`
            })
            setTimeout(() => {
                $(self.instance).find('.images_wrapper').css({})
            }, 1000)
        })
        $(this.instance).bind('touchmove', e => {
            if (e.touches.length <= 1) {
                if (self.translateXDiff <= 0) {
                    self.translateXDiff = self.translateXDiff - 1;
                    $(self.instance).find('.images_wrapper').css({
                        transition: 'none',
                        marginLeft: -self.translateXDiff
                    })
                } else {
                    $(self.instance).find('.images_wrapper').css({
                        transition: 'all .3s ease',
                        marginLeft: 0
                    })
                }
            }
        })
        $(this.instance).bind('touchend', e => {
            $(self.instance).find('.images_wrapper').css({
                transition: 'all .3s ease',
                marginLeft: 0
            })
        })
    }

    close() {
        this.instance.style.display = 'none'
    }
}

export default SwiperImages